<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>vue-vlidator</title>
	<style type="text/css" media="all">
		.error {
			border: 1px solid #f00;
		}
		
		span {
			color: #f00;
		}
	</style>
</head>
<body>
<div id="app">
	<validator name="validation">
		<form novalidate>
			<div>
				<label>名字：</label>
				<input id="username" v-validate:username="['name']" placeholder="请输入名字" v-model="username"/>
				<label>新密码：</label>
				<input v-validate:newpsw="{required: true, maxlength: 18, minlength: 6}" placeholder="请输入新密码"/>
				<input type="submit" value="send" :disabled="!$validation.valid">
			</div>
		</form>
	</validator>
</div>
<script src="../../plugins/vue/vue.min.js"></script>
<script type="text/javascript" src="vue-validator.min.js"></script>
<script type="text/javascript">
	new Vue({
		el: '#app',
		data: {
			username: "23233233223",
			newpsw: "23232332232323"
		},
		validators: {
			name: {
				check: function (val) {
					if (val.length < 15) {
						return val.replace(/(^\s*)|(\s*$)/g, "")  // 处理首末空格
					}
				}
			},
		},
	})
</script>
</body>
</html>
